<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>注册页面</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. $导入，建议使用1.9以上的版本 -->
    <!-- <script src="js/$-3.1.1.min.js"></script> -->
    <!-- <script src="js/md5.min.js"></script> -->
    <!-- 3. 导入bootstrap的js文件 -->
    <!-- <script src="js/bootstrap.min.js"></script> -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript"></script>
    <style>
        #body {
            background-image: url("images/3.png");
            background-size:100% 100%;
            background-attachment: fixed;
        }
    </style>

    <script>
        // 注册的数据提交 AJAX
        function mySubmit() {
            // 1.对输入的内容进行非空和正确性效验
            var username = jQuery("#user").val();
            var password = jQuery("#password").val();
            var password2 = jQuery("#password2").val();
            if (username.trim() == "" || password.trim() == "" || password2.trim() == "") {
                alert("用户名和密码不能为空 !");
                return;
            }
            // 密码强度效验（密码的长度必须大于 6）【扩展，密码组合强度效验】
            if (password.length < 6) {
                alert("密码强度过低，位数必须大于等于6位！");
                password.focus();
                return;
            }
            if (password != password2) {
                alert("两次输入的密码不一致，请检查！");
                password.focus();
                return;
            }
            // 2.发送 ajax 请求到后端
            jQuery.ajax({
                url: "/user/reg",
                type: "POST",
                data: {
                    "username": username,
                    "password": password
                },
                dataTye: "json",
                success: function (data) {
                    if (data.status == 1) {
                        alert("注册成功!");
                        window.location.href = "login.html";
                    } else {
                        alert("注册失败,当前用户已经存在!");
                        $("#user").val("");
                        $("#password").val("");
                        $("#password2").val("");
                        username.focus();
                    }
                }
            });
        }
    </script>
</head>


<body id="body">

<div class="container" style="width: 400px;margin-top: 110px;background-color: rgba(255,255,255,0.8)">
    <h3 style="text-align: center;">账号注册</h3>
    <div class="form-group">
        <label for="user">用户名：</label>
        <input type="text" name="username" class="form-control" id="user" placeholder="请输入用户名"/>
    </div>

    <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
    </div>

    <div class="form-group">
        <label for="password">确认密码：</label>
        <input type="password" name="password2" class="form-control" id="password2" placeholder="请再次输入密码"/>
    </div>

    <hr/>
    <div class="form-group" style="text-align: center;"><!--class="form-group"-->
        <input style="width: 100px;height: 35px" id="submit" onclick="mySubmit()" class="btn btn btn-primary"
               type="button" value="提交">

        <a style="width: 100px;height: 35px;text-align: center" class="btn btn-primary" href="login.html">返回</a>
    </div>
</div>

</body>
</html>